import { Checkbox, Form, Input,Button,Card, message } from "antd"
import './index.scss'
import logo from '@/assets/icon_logo.png'
import { useNavigate } from "react-router-dom"
// import { useStore } from "@/store"
import { useDispatch } from "react-redux"
import { loginSetToken } from '@/store/modules/reduxLoginStore'


const Login = ()=>{
    //获取跳转实例对象
    const navigate = useNavigate()
    // const { loginStore } = useStore()
    const dispatch = useDispatch()
    const onFinish = async (values) => {
        console.log('Success:', values);
        const { mobile, code } = values
        
        try{
            console.log('code:', code);
            console.log(loginSetToken,'loginSetToken');
            // await loginStore.login({mobile,code})
            dispatch(loginSetToken(mobile, code))
            navigate('/')
        }catch(e){
            message.error(e.response?.data?.message || '登陆失败')
        }
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    return(
        <div className="login">
        <Card className="login-container">
            <img className="login-logo" src={logo} alt="" />
            {/* 登录表单 */}
            <Form
                validateTrigger={['onBlur', 'onChange']} 
                onFinish={ onFinish } 
                onFinishFailed={onFinishFailed} 
                initialValues={{
                    mobile: '13911111111',
                    code: '246810',
                    remember: true
                }}
            >
                <Form.Item
                    name="mobile"
                    rules={[
                        {
                        pattern: /^1[3-9]\d{9}$/,
                        message: '手机号码格式不对',
                        validateTrigger: 'onBlur'
                        },
                        { required: true, message: '请输入手机号' }
                    ]}
                >
                <Input size="large" placeholder="请输入手机号" />
                </Form.Item>

                <Form.Item
                    name="code"
                    rules={[
                    { len: 6, message: '验证码6个字符', validateTrigger: 'onBlur' },
                    { required: true, message: '请输入验证码' }
                    ]}
                >
                <Input size="large" placeholder="请输入验证码" />
                </Form.Item>

                <Form.Item>
                <Checkbox className="login-checkbox-label">我已阅读并同意「用户协议」和「隐私条款」</Checkbox>
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit" size="large" block>
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </Card>
        </div>
    )
}
export default Login